<script setup>
// import MovieList from './MovieList.vue'
</script>

<template>
    <div class="main">


    <div class="pannel">
        <div class="pannel_head">
            <h2>
                <i class="rebboIcon iconfont icon-paihangbang"></i>
                热门排行榜
            </h2>
        </div>
    </div>


    <div class="rank">

        <div class="rank_info">
      

            <ul class="part_rows">
                <li class="rankFirst_item">
                    <a href="#">
                        <div class="rank_left"><span style="background-color: red;">1</span></div>
                        <div class="rank_right">
                            <h4>扫黑-决战 <i class="iconfont icon-search"> 666</i></h4>
                            <p class="vodlist_sub">2021&nbsp;/&nbsp;中国大陆&nbsp;/&nbsp;动作</p>
                            <p class="vodlist_sub">状态：HD</p>
                        </div>
                    </a>
                </li>
                <li class="part_eone">
                    <a href="#"><span class="part_nums">2</span> <span>小小飞虎对</span> <i class="iconfont icon-icon">
                            666</i></a>
                </li>
                <li class="part_eone">
                    <a href="#"><span class="part_nums" style="background-color:#ffc600 ;">3</span> <span>小小飞虎对</span> <i
                            class="iconfont icon-icon"> 666</i></a>
                </li>

                <li class="part_eone">
                    <a href="#"><span class="part_nums" style="background-color:#999 ;">3</span> <span>实数学</span> <i
                            class="iconfont icon-icon"> 666</i></a>
                </li>

                <li class="part_eone">
                    <a href="#"><span class="part_nums" style="background-color:#999 ;">4</span> <span>实数学</span> <i
                            class="iconfont icon-icon"> 666</i></a>
                </li>

                <li class="part_eone">
                    <a href="#"><span class="part_nums" style="background-color:#999 ;">5</span> <span>实数学</span> <i
                            class="iconfont icon-icon"> 666</i></a>
                </li>
                <li class="part_eone">
                    <a href="#"><span class="part_nums" style="background-color:#999 ;">6</span> <span>实数学</span> <i
                            class="iconfont icon-icon"> 666</i></a>
                </li>
                <li class="part_eone">
                    <a href="#"><span class="part_nums" style="background-color:#999 ;">7</span> <span>实数学</span> <i
                            class="iconfont icon-icon"> 666</i></a>
                </li>
                <li class="part_eone">
                    <a href="#"><span class="part_nums" style="background-color:#999 ;">8</span> <span>实数学</span> <i
                            class="iconfont icon-icon"> 666</i></a>
                </li>

                <li class="part_eone">
                    <a href="#"><span class="part_nums" style="background-color:#999 ;">9</span> <span>实数学</span> <i
                            class="iconfont icon-icon"> 666</i></a>
                </li>

                <li class="part_eone">
                    <a href="#"><span class="part_nums" style="background-color:#999 ;">10</span> <span>实数学</span> <i
                            class="iconfont icon-icon"> 666</i></a>
                </li>
            </ul>

        </div>

    </div>
</div>
</template>


<style scoped lang='scss'>
.main {
    width: 100%;
    margin-left: 10px;

}

.rebboIcon {
    font-size: 24px;
    color: #ff5f00;
}

.rank {
    width: 100%;

    .part_rows {
        overflow: hidden;

        .rankFirst_item {
            margin-top: 10px;
            height: 120px;
        }

        a:hover {
            color: #ff5f00;
        }

        .part_eone {
            margin-top: 15px;

            .part_nums {
                display: inline-block;
                text-align: center;
                width: 25px;
                height: 25px;
                background-color: #ff5f00;
                color: #fff;
                font-weight: bold;
            }

            i {
                font-weight: bold;
                float: right;
                margin-right: 20px;
            }
        }
    }

    a {
        padding: 1px;
        margin-left: 10px;


        .rank_left {
            float: left;
            width: 25%;
            height: 100px;
            margin-top: 5px;
            margin-left: 15px;
            overflow: hidden;
            background-color: #ff5f00;
            background-position: center;
            background-image: url("@/assets/images/none.png");

            span {
                text-align: center;
                width: 25px;
                height: 25px;
                background-color: #ff5f00;
                display: block;
                color: #fff;
                font-weight: bold;
            }
        }



        .rank_right {
            padding-right: 20px;
            padding-left: 150px;

            i {
                float: right;
            }
        }
    }
}


// 设置文本超出使用省略号
.view-text {
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}



.pannel {
    display: flex;

    .pannel_head {
        width: 400px;

        h2 {
            display: inline-block;

        }

        .more {
            padding-left: 15px;
        }



    }

    .right_menu {

        li {
            line-height: 70px;
            float: left;

            em {
                color: #ff5f00;
            }
        }

    }

    a:hover {
        color: $xtxColor;
    }


}</style>